<template>
	<div class="addDish">
		<div class="leftCont">
			<div v-show="seachKey.trim() == ''" class="tabBut">
				<div v-for="(item, index) in dishType" :key="index" class="dish_item" :class="{ 'act': index == keyInd }" @click="checkTypeHandle(index, item.id)"
					>{{ item.name }}</div
				>
			</div>
			<div class="tabList">
				<div class="table" :class="{ borderNone: !dishList.length }">
					<div v-if="dishList.length == 0" style="padding-left: 10px">
						<Empty />
					</div>
					<el-checkbox-group v-if="dishList.length > 0" v-model="checkedList" @change="checkedListHandle">
						<div v-for="(item, index) in dishList" :key="item.name + item.id" class="items">
							<el-checkbox :key="index" :label="item.name">
								<div class="item">
									<span style="flex: 3; text-align: left">{{ item.dishName }}</span>
									<span>{{ item.status == 0 ? '停售' : '在售' }}</span>
									<span>{{ (Number(Number(item.price).toFixed(2)) * 100) / 100 }}</span>
								</div>
							</el-checkbox>
						</div>
					</el-checkbox-group>
				</div>
			</div>
		</div>
		<div class="ritCont">
			<div class="tit">已选菜品({{ checkedListAll.length }})</div>
			<div class="items">
				<div v-for="(item, ind) in checkedListAll" :key="ind" class="item">
					<span>{{ item.dishName || item.name }}</span>
					<span class="price">￥ {{ (Number(Number(item.price).toFixed(2)) * 100) / 100 }} </span>
					<span class="del" @click="delCheck(item.name)">
						<img src="/@/assets/icons/btn_clean@2x.png" alt="" />
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getCategoryList, queryDishList } from '/@/api/dish';
import Empty from '/@/components/Empty/index.vue';
import {} from 'vue';
import { ElMessage } from 'element-plus';
import { watchEffect } from 'vue';

const props = defineProps({
	value: {
		type: Number,
	},
	checkList: {
		type: Array,
		default: [],
	},
	seachKey: {
		type: String,
		default: '',
	},
});

const emit = defineEmits(['checkList']);

let dishType = ref<any>([]);
let dishList = ref<any>([]);
let allDishList = ref<any>([]);
let keyInd = ref(0);
let checkedList = ref<any>([]);
let checkedListAll = ref<any>([]);
let ids: any = new Set();

onMounted(() => {
	init();
});

watchEffect(() => {
	if (props.seachKey) {
		getDishForName(props.seachKey);
	}
});

const init = () => {
	// 菜单列表数据获取
	getDishType();
	// 初始化选项
	checkedList.value = props.checkList.map((it: any) => it.name);
	// 已选项的菜品-详细信息
	checkedListAll.value = props.checkList.reverse();
};
// 获取套餐分类
const getDishType = () => {
	getCategoryList({ type: 1 }).then((res) => {
		if (res.code === 1) {
			dishType = res.data;
			getDishList(res.data[0].id);
		} else {
			ElMessage.error(res.data.msg);
		}
	});
};

// 通过套餐ID获取菜品列表分类
const getDishList = (id: number) => {
	queryDishList({ categoryId: id }).then((res) => {
		if (res.code === 1) {
			if (res.data.length == 0) {
				dishList.value = [];
				return;
			}
			let newArr = res.data;
			newArr.forEach((n: any) => {
				n.dishId = n.id;
				n.copies = 1;
				n.dishName = n.name;
			});
			dishList.value = newArr;
			if (!ids.has(id)) {
				allDishList.value = [...allDishList.value, ...newArr];
			}
			ids.add(id);
		} else {
			ElMessage.error(res.data.msg);
		}
	});
};

// 关键词收搜菜品列表分类
const getDishForName = (name: any) => {
	queryDishList({ name }).then((res) => {
		if (res && res.data && res.data.code === 1) {
			let newArr = res.data.data;
			newArr.forEach((n: any) => {
				n.dishId = n.id;
				n.dishName = n.name;
			});
			dishList = newArr;
		} else {
			ElMessage.error(res.data.msg);
		}
	});
};

// 点击分类
const checkTypeHandle = (ind: number, id: any) => {
	keyInd.value = ind;
	getDishList(id);
};

// 添加菜品
const checkedListHandle = (value: [string]) => {
	// TODO 实现倒序 由于value是组件内封装无法从前面添加 所有取巧处理倒序添加
	// 倒序展示 - 数据处理前反正 为正序
	checkedListAll.value.reverse();
	// value 是一个只包含菜品名的数组 需要从 dishList中筛选出 对应的详情
	// 操作添加菜品
	const list = allDishList.value.filter((item: any) => {
		let data;
		value.forEach((it: any) => {
			if (item.name == it) {
				data = item;
			}
		});
		return data;
	});
	// 编辑的时候需要与已有菜品合并
	// 与当前请求下的选择性 然后去重就是当前的列表
	const dishListCat = [...checkedListAll.value, ...list];
	let arrData: any[] = [];
	checkedListAll.value = dishListCat.filter((item: any) => {
		let allArrDate;
		if (arrData.length == 0) {
			arrData.push(item.name);
			allArrDate = item;
		} else {
			const st = arrData.some((it) => item.name == it);
			if (!st) {
				arrData.push(item.name);
				allArrDate = item;
			}
		}
		return allArrDate;
	});
	// 如果是减菜 走这里
	if (value.length < arrData.length) {
		checkedListAll = checkedListAll.value.filter((item: any) => {
			if (value.some((it) => it == item.name)) {
				return item;
			}
		});
	}
	emit('checkList', checkedListAll.value);
	// 数据处理完反转为倒序
	checkedListAll.value.reverse();
};

// 删除
const delCheck = (name: any) => {
	const index = checkedList.value.findIndex((it:any) => it === name);
	const indexAll = checkedListAll.value.findIndex((it: any) => it.name === name);
	checkedList.value.splice(index, 1);
	checkedListAll.value.splice(indexAll, 1);
	emit('checkList', checkedListAll.value);
};
</script>
<style lang="scss" scoped>
.addDish {
	.el-checkbox__label {
		width: 100%;
	}
	.empty-box {
		margin-top: 50px;
		margin-bottom: 0px;
	}
}
</style>
<style lang="scss" scoped>
.addDish {
	padding: 0 20px;
	display: flex;
	line-height: 40px;
	.empty-box {
		img {
			width: 190px;
			height: 147px;
		}
	}

	.borderNone {
		border: none !important;
	}
	span,
	.tit {
		color: #333;
	}
	.leftCont {
		display: flex;
		border-right: solid 1px #efefef;
		width: 60%;
		.tabBut {
			width: 110px;
			font-weight: bold;
			border-right: solid 2px #f4f4f4;
			.dish_item {
        height: 40px;
				text-align: center;
				cursor: pointer;
				position: relative;
        color: #000;
			}
		}
		.act {
      border-right: 2px solid #FFC200;
			color: #FFC200 !important;
		}
		.act::after {
			content: ' ';
			display: inline-block;
			background-color: --next-color-mine;
			width: 2px;
			height: 40px;
			position: absolute;
			right: -2px;
		}
		.tabList {
			flex: 1;
			padding: 15px;
			height: 400px;
			overflow-y: scroll;
			.table {
				border: solid 1px #f4f4f4;
				border-bottom: solid 1px #f4f4f4;
				.items {
					border-bottom: solid 1px #f4f4f4;
					padding: 0 10px;
					display: flex;
					.el-checkbox,
					.el-checkbox__label {
						width: 100%;
					}
					.item {
						display: flex;
						padding-right: 20px;
						span {
							display: inline-block;
							text-align: center;
							flex: 1;
							font-weight: normal;
						}
					}
				}
			}
		}
	}
	.ritCont {
		width: 40%;
		.tit {
			margin: 0 15px;
			font-weight: bold;
		}
		.items {
			height: 338px;
			padding: 4px 15px;
			overflow: scroll;
		}
		.item {
			box-shadow: 0px 1px 4px 3px rgba(0, 0, 0, 0.03);
			display: flex;
			text-align: center;
			padding: 0 10px;
			margin-bottom: 20px;
			border-radius: 6px;
			color: #818693;
			span:first-child {
				text-align: left;
				color: #20232a;
				flex: 70%;
			}
			.price {
				display: inline-block;
				flex: 70%;
				text-align: left;
			}
			.del {
				cursor: pointer;
				img {
					position: relative;
					top: 5px;
					width: 20px;
				}
			}
		}
	}
}
</style>
